<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="484px"
      :title="modelTitle"
      wrapClassName="user-modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body">
        <a-form-model
          ref="form"
          :model="form"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
          :rules="formRules"
          :hideRequiredMark="modelTitle == '详情'"
        >
          <a-form-model-item label="规范名称:" prop="standardName">
            <a-input
              type="text"
              v-model.trim="form.standardName"
              placeholder="请输入规范名称"
              :disabled="!modelType"
              :maxLength="200"
            />
          </a-form-model-item>
          <a-form-model-item label="上传附件:" prop="fileList">
            <input
              @change="fileChange"
              type="file"
              ref="upload"
              id="upload"
              style="display: none"
            />
            <a-button v-if="modelType" type="primary" @click="fileUpload"
              >点击上传</a-button
            >
            <!-- 新增、编辑 -->
            <div v-if="modelType">
              <div class="file-name-type" v-if="fileList.length > 0">
                <div
                  v-for="(item, index) in fileList"
                  :key="index"
                  @click="viewFile(item)"
                >
                  <div
                    class="file-list"
                    @mouseover="mouseOver(item, index)"
                    @mouseleave="mouseLeave(item, index)"
                  >
                    <div class="file-name">
                      <a-icon :type="item.iconType" style="margin-right: 5px" />
                      <div class="file-name-text">
                        {{ item.name }}
                      </div>
                    </div>
                    <div style="margin-left: 8px">
                      <span class="size-color">{{ sizeTostr(item.size) }}</span>
                      <a-icon
                        v-show="!item.checkd"
                        type="check"
                        class="check-icon"
                      />
                      <a-icon
                        v-show="item.checkd"
                        type="close-circle"
                        class="close-icon"
                        @click.stop="fileDelete(index, item)"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 详情 -->
            <div v-if="!modelType">
              <a-input
                v-if="fileList.length == 0"
                disabled
                value="暂无附件"
              ></a-input>
              <div v-else class="file-name-type">
                <div
                  v-for="(item, index) in fileList"
                  :key="index"
                  @click="viewFile(item)"
                >
                  <div class="file-download-list">
                    <div class="file-name">
                      <a-icon type="paper-clip" style="margin-right: 5px" />
                      <div class="file-name-text">{{ item.name }}</div>
                    </div>
                    <div style="margin-left: 8px">
                      <span class="size-color">{{ sizeTostr(item.size) }}</span
                      ><a-icon
                        type="download"
                        class="download-icon"
                        @click.stop="downLoadFile(item)"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div class="modal-footer">
        <a-button type="default" @click="closeModal()"
          >{{ modelTitle == "详情" ? "返回" : "取消" }}
        </a-button>
        <a-button
          type="primary"
          @click="save()"
          v-if="modelType"
          :loading="loading"
        >
          提交
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import bjSelect from "@/components/bj-select";
import { notificationTip, downFileByUrl, kkFileView } from "@/utils";
import { add, detail, edit } from "@/api/wisdom-beam/trial-app";
export default {
  components: {
    bjSelect,
  },
  props: ["visible", "modelType", "modelTitle", "id", "zhgdDeptCode"],
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          if (this.id) {
            this.getDetail();
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        standardName: "",
      },
      formRules: {
        standardName: [
          {
            required: true,
            message: "请输入规范名称",
          },
        ],
      },
      //附件
      fileList: [],
      fileId: "", //附件id
    };
  },
  mounted() {},
  methods: {
    //附件预览
    viewFile(file) {
      let { fileUrl } = file;
      window.open(kkFileView(fileUrl));
    },
    //附件下载
    downLoadFile(file) {
      let { fileUrl, name } = file;
      window.open(fileUrl + "&filename=" + name, "_blank");
    },
    // 详情
    getDetail() {
      detail(this.id)
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.form.standardName = result.standardName;
          this.form.id = result.id;
          //附件
          this.fileId = result.fileId || "";
          this.fileList = [];
          this.fileList.push({
            uid: result.fileData.id,
            name: result.fileData.realFileName,
            checkd: false,
            iconType: "paper-clip",
            size: result.fileData.fileSize,
            file: "",
            id: result.fileData.id,
            fileUrl: result.fileData.fileUrl,
          });
        })
        .catch((_) => {});
    },

    // 保存
    save() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          let { form, fileList, modelTitle } = this;

          let formdata = new FormData();
          for (let i = 0; i < fileList.length; i++) {
            const file = fileList[i].file;
            formdata.append("file", file);
          }
          if (modelTitle == "上传") {
            add(formdata, this.form.standardName)
              .then((res) => {
                this.loading = false;
                this.closeModal();
                notificationTip("success", "上传成功!");
                this.$parent.getTableData();
              })
              .catch((_) => {
                this.loading = false;
              });
          } else if (modelTitle == "编辑") {
            edit(formdata, {
              standardName: this.form.standardName,
              id: this.id,
              fileId: this.fileId,
            })
              .then((res) => {
                this.loading = false;
                this.closeModal();
                notificationTip("success", "编辑成功!");
                this.$parent.getTableData();
              })
              .catch((_) => {
                this.loading = false;
              });
          }
        }
      });
    },

    filterkey(data = undefined) {
      return data ? data.key : "";
    },
    filterlabel(data = undefined) {
      return data ? data.label : "";
    },
    //关闭弹框
    closeModal() {
      this.fileList = [];
      this.$refs.form.resetFields();
      this.$emit("update:visible", false);
    },
    //文件上传
    fileUpload() {
      this.$refs.upload.click();
    },
    fileChange(event) {
      this.fileList = [];
      this.fileList.unshift({
        file: event.target.files[0],
        name: event.target.files[0].name,
        size: event.target.files[0].size,
        checkd: false,
        iconType: "loading",
      });
      setTimeout(() => {
        this.fileList[0].iconType = "paper-clip";
        event.target.value = "";
      }, 500);
    },

    //文件删除
    fileDelete(i, item) {
      this.fileList.splice(i, 1);
      this.fileId = "";
    },

    // 移入
    mouseOver(item, index) {
      item.checkd = true;
    },
    // 移出
    mouseLeave(item, index) {
      item.checkd = false;
    },
    //文件大小转换
    sizeTostr(size) {
      var data = "";
      data = (size / 1024).toFixed(2) + "kb";
      var sizestr = data + "";
      var len = sizestr.indexOf("\.");
      var dec = sizestr.substr(len + 1, 2);
      if (dec == "00") {
        //当小数点后为00时 去掉小数部分
        return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
      }
      return sizestr;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-input[disabled],
/deep/.ant-select[disabled] {
  color: #000000;
}
/deep/.ant-upload-list {
  display: none;
}
//弹框样式
/deep/.user-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .ant-modal-header {
    border-top: 5px solid var(--primary-color) !important;
  }
  .curve-modal-body {
    padding: 20px;
    max-height: 600px;
    .custom-scrollbar();
    .card-view-container {
      padding-bottom: 0;
      font-size: 18px;
      .gzd-button {
        width: 96px;
        height: 36px;
        background: #ffffff;
        border: 1px solid var(--primary-color);
        border-radius: 2px;
        color: var(--primary-color);
        text-align: center;
        line-height: 36px;
        position: absolute;
        top: 9px;
        right: 20px;
      }
    }
  }
  .modal-footer {
    padding-bottom: 20px;
    text-align: center;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
  .ant-form-item-label {
    > label {
      color: #999;
    }
  }
  .ant-form-item {
    margin-bottom: 16px !important;
  }
}
</style>
